<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>${requestScope.friendUsername}</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/template.css" media="all">
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<style>
    .header {
        position: absolute;
        top: 0px;
        height: auto;
        width: 100%;
    }


    .middle_outer {
        position: absolute !important;
        position: relative;
        top: 76px !important;
        top: 0px;
        bottom: 55px;
        width: 100%;
        overflow: hidden;
        height: auto !important;
        height: 100%;
    }


    .middle_inner {
        height: 100%;
        overflow-y: auto;
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
    }

    .middle_inner::-webkit-scrollbar {
        width: 0 !important;
    }

    .footer {
        position: absolute;
        bottom: 0px;
        height: auto;
        width: 100%;
    }

</style>
<body  onbeforeunload="myclose()" onload="myopen()">
<div>
    <div >
        <div class='header' style="padding: 30px;">
            <div style="background-color: lightseagreen;width: 100%; height: 40px; margin-bottom: 20px; text-align: center;" >
                <img src="/image/${requestScope.friendImage}" style="width: 30px ;height: 30px ; border-radius: 50%">
                <span style="color: wheat; font-size:20px ;line-height: 40px;margin-left: 20px;">${requestScope.friendUsername}</span>
            </div>
        </div>
        <div class='middle_outer'>
            <div class='middle_inner' id="test">
                <div id="message" style="padding: 10px 30px;">  <!-- 消息部分-->
                    <c:forEach items="${requestScope.message}" var="message">
                        <div class='clearfix'><div style='display: inline;'><div style='float: left;'><div style='margin:0px 15px;'><img src='/image/${requestScope.friendImage}' height='46px' width='46px'  style='border-radius: 50%;'></div></div><div class='alert alert-info' role='alert' style='width: 70%; float: left;'><span id="imagesize">${message.content}</span></div></div></div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
    <div class='footer'>
        <div style=" padding: 0px 20px;">
            <div class="row" style="padding-bottom: 5px;">
                <div class="col-md-10 col-xs-10"><input type="text" class="form-control" id="msg"></div>
                <div class="col-md-2 col-xs-2  clearfix"><button type="button" class="btn btn-primary" style="float: right;" onclick="onsend()">发送</button></div>
            </div>
            <div class="row" style="padding: 0px 20px 0px 20px;">
                <i class="layui-icon layui-icon-picture" id="image" style="font-size: 30px; line-height: 30px; margin-right: 20px;"></i>
                <i class="layui-icon layui-icon-file" id="file"  style="font-size: 30px; line-height: 30px;"></i>
            </div>
        </div>
    </div>

</div>
</div>
</body>
<script src="/layuiadmin/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
    var target = "ws://localhost:8080/socket/${requestScope.myId}/${requestScope.image}/${requestScope.otherId}"
    var ws;
    function myopen() {
        if ('WebSocket' in window){
            ws = new WebSocket(target)
        } else if ('MozWebSocket' in window){
            ws = new MozWebSocket(target)
        } else {
            alert("error")
            return;
        }

        /*接收服务端发来的消息*/
        ws.onmessage=function (event) {
            $('#message').append("<div class='clearfix'><div style='display: inline;'><div style='float: left;'><div style='margin:0px 15px;'><img src='/image/${requestScope.friendImage}' height='46px' width='46px'  style='border-radius: 50%;'></div></div><div class='alert alert-info' role='alert' style='width: 70%; float: left;'><span id='imagesize'>"+event.data+"</span></div></div></div>");
            document.getElementById("test").scrollTop = document.getElementById("test").scrollHeight;
        }
    }

    function onsend() {
        var msg = document.getElementById("msg").value;
        if (msg.length>120){
            alert("消息太长啦")
            return;
        }
        $('#message').append("<div class='clearfix'><div style='display: inline;'><div style='float: right;'><div style='margin:0px 15px;'><img src='/image/${requestScope.image}' height='46px' width='46px'  style='border-radius: 50%;'></div></div><div class='alert alert-warning' role='alert' style='width: 70%; float: right;'><span>"+msg+"</span></div></div></div>");
        document.getElementById("test").scrollTop = document.getElementById("test").scrollHeight;
        ws.send(msg);
        $('#msg').val('');
    }

    function myclose() {
        ws.close();
    }

    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use('upload', function(){
        var upload = layui.upload;

        //执行实例

        upload.render({
            elem: '#image' //绑定元素
            ,accept:'images' //上传文件类型
            ,acceptMime:'image/*'
            ,url: '/chat/upload/image' //上传接口
            ,method:'post'
            ,drag:true
            ,done: function(res){
                var msg = "<img layer-src='"+res.data.src+"' src='"+res.data.src+"'  height='80px'"
                $('#message').append("<div class='clearfix'><div style='display: inline;'><div style='float: right;'><div style='margin:0px 15px;'><img src='/image/${requestScope.image}' height='46px' width='46px'  style='border-radius: 50%;'></div></div><div class='alert alert-warning' role='alert' style='width: 70%; float: right;'><span id='imagesize'>"+msg+"</span></div></div></div>");
                document.getElementById("test").scrollTop = document.getElementById("test").scrollHeight;
                ws.send(msg);
            }
        });

        upload.render({
            elem: '#file' //绑定元素
            ,accept:'file'
            ,exts: '7z|zip|rar|jpg|png|doc|docx|pdf|doc|xls|xlsx|crx'
            ,drag:true
            ,url: '/chat/upload/file' //上传接口
            ,done: function(res){
                var msg = "我发送了一个文件点击<a href='"+res.data.src+"'>"+res.data.name+"<a/>查看";
                $('#message').append("<div class='clearfix'><div style='display: inline;'><div style='float: right;'><div style='margin:0px 15px;'><img src='/image/${requestScope.image}' height='46px' width='46px'  style='border-radius: 50%;'></div></div><div class='alert alert-warning' role='alert' style='width: 70%; float: right;'><span>"+msg+"</span></div></div></div>");
                document.getElementById("test").scrollTop = document.getElementById("test").scrollHeight;
                ws.send(msg);
            }
        });
    });

</script>
</html>
